<!-- 组合式 -->
<script setup>
	import {
		ref,
	} from 'vue';

	import util from '@/utils/util';

	// 参数接收
	const props = defineProps({

		// 背景颜色
		backgroundColor: {
			type: String,
			default: '#F5F8FD',
		},
		borderRadius: {
			type: String,
			default: '',
		},
		detailPage: {
			type: Boolean,
			default: false,
		},
		info: {
			type: Object,
			default: () => {
				return {};
			}
		},
		num: {
			type: Number,
			default: 1,
		},
	})

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();

	// 详情
	function changeTo() {

		return;
		// 去登录
		const login = util.GoLogin();
		if (!login) return;

		let url = `/pages/hall/details`;
		let param = {
			id: props.info.id || ''
		};
		if (!url) return;
		util.to(url, param);
	}

	// 回调
	const emit = defineEmits(['change', 'dele'])
</script>


<template>
	<div class="l-card-team" :style="{backgroundColor}" @click="changeTo">
		<p>{{num}}</p>
		<p>{{info.name || '--'}}</p>
		<p>{{info.studyNo || '--'}}</p>
		<p class="l-card-team-content">{{info.content || '--'}}</p>
		<el-link type="primary" @click="emit('dele', info)">删除</el-link>
	</div>
</template>


<style lang="scss">
	.l-card-team {
		border-radius: 4px 4px 4px 4px;
		line-height: 50px;
		padding: 0 23px;

		display: flex;
		align-items: center;
		justify-content: space-between;

		font-weight: 400;
		font-size: 14px;

		p {
			color: #333333;
			margin-right: 10px;
		}

		.l-card-team-content {
			margin: 0 15px;
			flex: 1;
			color: #999999;
		}

		.el-link {
			line-height: 30px;
		}
	}
</style>